<!-- ListCase.vue -->
<template>
  <div>
    <ul v-if="items.length > 0">
      <li v-for="item in items" :key="item.id">
        <input v-model="item.status" type="checkbox" />
        <span :class="{ completed: item.status }">{{ item.text }}</span>
      </li>
    </ul>
    <p v-else>这里空空如也</p>
    <p v-if="incompleteItem > 0 || completeItem > 0">已完成{{ incompleteItem }}项</p>
    <p v-if="incompleteItem > 0 || completeItem > 0">待完成{{ completeItem }}项</p>
    <button v-if="incompleteItem > 0 || completeItem > 0" @click="$emit('clear-completed')">清除已完成</button>

    <!-- 全选按钮 -->
     <button @click="selectAll">全选</button>
    <!--全不选 -->
    <button @click="selectNone">全不选</button>
  </div>
</template>

<script setup>
import { computed} from 'vue';
// import { defineProps } from 'vue';

const props = defineProps({
  items: {
    type: Array,
    required: true,
  },
});

// 计算已完成事项
const incompleteItem = computed(() => props.items.filter((item) => item.status).length);

// 计算未完成事项
const completeItem = computed(() => props.items.filter((item) => !item.status).length);

//全选功能
const selectAll = () => {
  props.items.forEach((item) => {
    item.status = true;
  });
};
//全不选功能
const selectNone =() => {
  props.items.forEach((item) => {
    item.status = false;
  });
}


</script>

<style scoped>
.completed {
  text-decoration: line-through;
}
ul {
  list-style: none;
}
.confirm-buttons {
  margin-top: 10px;
}
button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>
